<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   		<title>Control</title>
        <link href="../../py/resources/share/control/core.css" rel="stylesheet" type="text/css" />
        <link href="../../py/resources/default/control/core.css" rel="stylesheet" type="text/css" />
        <link href="../../py/resources/share/control/splitter.css" rel="stylesheet" type="text/css" />
        
        <script src="../../py/system.js" type="text/javascript"></script>
		<script src="../../py/system/dom/element.js" type="text/javascript"></script>
		<script src="../../py/system/controls/control.js" type="text/javascript"></script>
		<script src="../../py/system/controls/surround.js" type="text/javascript"></script>
		<script src="../../py/system/controls/resizing.js" type="text/javascript"></script>
		<script src="../../py/system/controls/splitter.js" type="text/javascript"></script>
		
		
		<script src="../../common/project/project.js" type="text/javascript"></script>
		<script src="../../common/assets/scripts/default.js" type="text/javascript"></script>
		<script src="../../common/assets/scripts/debug.js" type="text/javascript"></script>		
	</head>
	
	<body>
	    <div id="ct" style="position: absolute; top: 100px;  left:400px;  width: 198px; height: 251px;" class="x-box">
	        
	        <div id="p1" style="background: yellow; height: 100%; position: absolute;  width: 100px" class="x-box"></div>
	        <div id="p2" style="background: green; height: 100%; left:106px; position: absolute;  width: 100px" class="x-box"></div>
	    </div>
		
		<script type="text/javascript">
			
			
				var ctrl = new Control( {
						
						
						dom: $('ct'),
						
						onSplitterBeforeResize: function(e){  trace(e);  },
						
						onSplitterAfterResize: function(e){
							trace(e);
						}
						
					});
	                
	                new Splitter('left', ctrl)
					.renderTo('ct')
					.setStyle('left', $('p1').getWidth());
	            
			
		</script>
	</body>
</html>
